import React,{Component} from 'react'
import {connect} from 'dva'
import {Result,List,WhiteSpace,Modal} from 'antd-mobile'
import {UserBox} from './style'
import browserCookie from 'browser-cookies'
import {Redirect} from 'dva/router'
//import Login from '../login/login'
class User extends Component{
    constructor(){
        super();
    }
    logout(){
        //console.log('123')
        const alert = Modal.alert;
        alert('注销', '确认退出登录吗???', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确认', onPress: () =>{
                // 删除cookie
                browserCookie.erase('userid');
                this.props.dispatch({type:'user/logout'});
            }}])
    }
    render(){
        //const myImg = src => <img src={src} className="spe am-icon am-icon-md" alt="" />;
        const {avatar,title,username,company,desc,money,redirectPath} = this.props.user
        //const src = `../../static/images/${avatar}.png`
        const Item = List.Item
        return username?
            (
            <UserBox>
                
                <Result
                    img={<img src={require(`../../static/images/${avatar}.png`)} style={{width:50}} alt="" />}
                    title= {username}
                    message={company?(<div>{company}</div>):null}
            />
            <List renderHeader={()=>'简介'}>
            <List.Item>
                {title}
                {desc.split('\n').map((item)=>{return(<List.Item.Brief key={item}>{item}</List.Item.Brief>)})}
               
            </List.Item>
            <List.Item>
                <div style={{float:'left'}}>薪资</div><div style={{float:'right'}}>{money}</div>
            </List.Item>
            
            </List>
            <WhiteSpace></WhiteSpace>
            <List>
                <Item onClick={()=>{this.logout()}}>
                    <span>退出登录</span>
                </Item>
            </List>
            </UserBox>):<Redirect to={redirectPath}></Redirect>
        
    }

}
const mapStateProps = (state)=>{
    return{
	   user:state.user
    }
}
export default connect(mapStateProps)(User);